Interactive App

The Interactive App Viewer is a secure, sandboxed environment for running lightweight applications directly within Ollie. It turns your IDE into a platform for micro-tools, prototypes, and AI-generated utilities.

📦 The .iapp Format

Interactive Apps are single-file containers formatted as JSON. This structure keeps logic, style, and markup bundled together, making them easy to share and version control.

{
  "html": "<button id='btn'>Click Me</button>",
  "css": "button { background: #007aff; color: white; }",
  "js": "document.getElementById('btn').onclick = () => window.ollie.send('clicked', { time: Date.now() });"
}

🔌 The Ollie Bridge API

Apps aren't isolated islands; they can communicate with the IDE using the built-in window.ollie bridge. This allows your custom tools to trigger actions or send data back to the main application.

• Send Events: window.ollie.send('action_name', data) - Dispatch custom events to the IDE.
• Notify Completion: window.ollie.notifyComplete(result) - Tell the AI Agent that a task is finished.

🛡️ Security & Sandboxing

Safety is paramount. Every app runs in a strict Sandbox that isolates it from your core system files.

• Iframe Isolation: Apps run in a constrained environment that blocks top-level navigation.
• Runtime Safety: Malicious code cannot access your local file system directly; it must go through the bridge.

🛠️ Developer Experience

Building `.iapp` tools is a first-class experience:

• Hot Reloading: Click the Reload (↻) button in the header to instantly reset the app state without restarting the IDE.
• Error Trapping: Runtime errors don't just crash silently. Ollie catches them and displays a friendly error card with the message and stack trace directly in the viewer.
• Premium Styling: Apps inherit a base set of "Premium" styles (Inter font, smooth buttons) so they look good by default.

Tic-Tac-Toe Demo

Calculator Tool

Data Visualization